<div class="panel panel-default org-unit-filter-panel">
    <div class="panel-heading" style="background-color: #ffffff;padding-bottom: 5px;padding-top: 5px;padding-left: 3px">
        <div class="" (click)="displayOrgTree()">
            <span *ngIf="!orgUnitTreeConfig.loading">
              {{  getProperPreOrgunitName() }}
          </span>
            <span *ngIf="orgUnitModel.selectedOrgUnits.length > 10 && orgUnitModel.selectedUserOrgUnits.length == 0">
            <span class="selected-item">
              {{ orgUnitModel.selectedOrgUnits[0].name }}
              <a (click)="deActivateNode(orgUnitModel.selectedOrgUnits[0].id,orgtree,$event)" class="removeorgunit" >x</a>
            </span>
            <span class="selected-item">
              {{ orgUnitModel.selectedOrgUnits[1].name }}
              <a (click)="deActivateNode(orgUnitModel.selectedOrgUnits[1].id,orgtree,$event)" class="removeorgunit">x</a>
            </span>
            <span class="selected-item">
              &nbsp; and {{ orgUnitModel.selectedOrgUnits.length - 2 }} more
            </span>
            </span>
            <span *ngIf="orgUnitModel.selectedOrgUnits.length <= 10 && orgUnitModel.selectedUserOrgUnits.length == 0">
             <span *ngFor="let item of orgUnitModel.selectedOrgUnits" class="selected-item ng-binding ng-scope">
              {{ item.name }}
               <a (click)="deActivateNode(item.id,orgtree,$event)" class="removeorgunit">x</a>
            </span>
            </span>
            <span class="no-selection" *ngIf="orgUnitModel.selectedOrgUnits.length == 0 && !orgUnitTreeConfig.loading && orgUnitModel.selectionMode != 'Usr_orgUnit'">{{ orgUnitTreeConfig.placeholder }}</span>
            <span *ngIf="orgUnitModel.selectedOrgUnits.length > 0" class="pull-right">
        <span class="selected-item" style="cursor: pointer" (click)="clearAll()" style="opacity: 0.7">X clear all</span>
            </span>
            <span *ngIf="orgUnitTreeConfig.loading">{{ orgUnitTreeConfig.loading_message }}</span>
        </div>
    </div>
</div>
<div class="panel-body org-unit-filter-body" style="padding: 3px;" [ngClass]="{'hiddenTree':showOrgTree}">
    <div class="" [ngClass]="{'hiddenTree':showOrgTree}" id="tree_view">
        <div class="org-unit-selection-options">
            <div appClickOutside (clickOutside)="showOrgUnitSettings = false" style="position:relative;">
                <button type="button" class="btn btn-sm btn-outline-secondary" (click)="toggleOrgUnitSettings($event)">
        Options
          <img
            src="assets/icons/arrow-down.png"
            class="float-right group-image"
            style="padding-top: 5px; padding-left: 5px;"
            alt="">
        </button>
                <ul class="multiselect-dropdown" *ngIf="showOrgUnitSettings">
                    <li>
                        <a (click)="setType('orgUnit', $event)">
                            <span *ngIf="orgUnitModel.selectionMode == 'orgUnit'" class="fa fa-check"></span>
                            <img src="assets/icons/tree.png" class="group-image"> Select Administrative Unit
                        </a>
                    </li>
                    <li>
                        <a (click)="setType('Level', $event)">
                            <span *ngIf="orgUnitModel.selectionMode == 'Level'" class="fa fa-check"></span>
                            <img src="assets/icons/level.png" class="group-image"> Select Level
                        </a>
                    </li>
                    <li>
                        <a (click)="setType('Group', $event)">
                            <span *ngIf="orgUnitModel.selectionMode == 'Group'" class="fa fa-check"></span>
                            <img src="assets/icons/group.png" class="group-image"> Select Group
                        </a>
                    </li>
                </ul>
            </div>
            <div>
                <!--org_unit_groups-->
                <div *ngIf="orgUnitModel.selectionMode == 'Group'">
                    <app-multiselect [selectionMode]="orgUnitModel.selectionMode" [placeholder]="'Select Organisation units group'" [selected_items]="orgUnitModel.selectedGroups" [items]="orgUnitModel.orgUnitGroups" (onSelected)="setSelectedGroups($event)"></app-multiselect>

                </div>
                <!--user_org_unit-->
                <div [ngClass]="{'hiddenTree': orgUnitModel.selectionMode != 'orgUnit'}">
                    <app-multiselect #period_selector [selectionMode]="orgUnitModel.selectionMode" [placeholder]="'Select Organisation Unit'" [items]="userOrgUnitsTypes" [selected_items]="orgUnitModel.selectedUserOrgUnits" (onSelected)="setSelectedUserOrg($event)"></app-multiselect>

                </div>
                <!--org_unit_levels-->
                <div *ngIf="orgUnitModel.selectionMode == 'Level'">
                    <app-multiselect [selectionMode]="orgUnitModel.selectionMode" [prefix]="'Level: '" [prefix_multiple]="'Levels: '" [placeholder]="'Select Organisation units levels'" [selected_items]="orgUnitModel.selectedLevels" [items]="orgUnitModel.orgUnitLevels | filterLevel:organisationunits[0]:orgUnitModel.selectedOrgUnits"
                        (onSelected)="setSelectedLevels($event)"></app-multiselect>

                </div>
            </div>
        </div>
        <div *ngIf="orgUnitTreeConfig.loading">{{ orgUnitTreeConfig.loading_message }}</div>
        <div class="tree-area" [ngClass]="{'someclass': orgUnitModel.selectedUserOrgUnits.length != 0}">
            <tree-root #orgtree [nodes]="organisationunits" [focused]="true" [options]="customTemplateStringOrgunitOptions" (activate)="activateOrg($event)" (deactivate)="deactivateOrg($event)">
                <ng-template #treeNodeTemplate let-node>
                    <span (click)="updateModelOnSelect(node.data)">{{ node.data.name }}</span>
                </ng-template>
            </tree-root>
        </div>

    </div>

    <div class="org-unit-actions float-right">
        <button (click)="close($event)" class="btn btn-sm btn-outline-secondary">Cancel</button>
        <button (click)="emit($event)" class="btn btn-sm btn-outline-secondary">Update</button>
    </div>
</div>